<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css" media="screen">
		div#login-component{
			width:23%;
			height:52vh;
			padding:0;
			margin-left:auto;
			margin-right:auto;
			box-shadow:0px 1px 1px 1px rgba(200,200,120,.3);
			border-radius:10px;
			position:relative;
			overflow:hidden;
		}
		div#login-component>div.aero-glass,div#login-component>div.login-page{
			width:100%;
			position:absolute;
			margin:0;
			padding:0;
		}
		/*毛玻璃*/
		.aero-glass{
			/*border:3px solid black;*/
			height:100%;
			background:url(backgrounds.jpg);
			background-size: 100% 100%;
			border:none;

			filter: blur(10px);
			-webkit-filter: blur(10px);
			-moz-filter: blur(10px);
			-ms-filter: blur(10px);
			filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10,MakeShadow=false);
			/*opacity:.6;*/
			z-index:0;
		}


		div.login-page{
			top:2%;
			width:100%;
			height:96%;
			z-index:1000;
			border:none;
			border-radius:2px;
			background:rgb(255, 255, 255);
			overflow:hidden;
			opacity:.95;
		}
		
		ul.login-nav{
			list-style:none;
			display:inline-flex;
			width:100%;
			height:5.5vh;
			margin-top:0;
			margin-bottom:0;
			padding:0;
			user-select:none;
			-webkit-user-select:none;
			-moz-user-select:none;
			-ms-user-select:none;
			background:white;
		}
		ul.login-nav>li{
			width:33.3%;
			height:100%;
			margin:0;
			padding:0;
			text-align:center;
			background:rgb(230,230,230);
		}
		ul.login-nav>li:first-child{
			border-right:1px solid purple;
			border-bottom:1px solid purple;
		}
		ul.login-nav>li:nth-child(2){
			border-right:1px solid purple;
			border-bottom:1px solid purple;
		}
		ul.login-nav>li:last-child{
			border-bottom:1px solid purple;
		}
	
		ul.login-nav>li>a{
			text-decoration:none;
			margin:0;
			height:100%;
			letter-spacing:.1em;
			font-size:110%;
			position:relative;
			top:20%;
			cursor:pointer;
		}

		/*登录、注册、重置密码组件*/
		div.login-page-content{
			width:99.5%;
			height:40vh;
			margin-top:0;
			padding:0;
			overflow:hidden;
			visibility:visible;
			transition:all 2s ease;
			-webkit-transition:all 2s ease;
		}
		div.login-page-content>div{
			width:97%;
			height:99%;
			margin-bottom:5%;
			margin-left:1.2%;
			padding:0;
			position:absolute;
		}

		/*登录*/
		div#login-content label#name{
			position:relative;
			top:11vh; left:10%;
		}
		span#input-slogan{
			display:block;
			position:absolute;
			width:85%;
			height:95%;
			top:.3vh;
			left:1.1em;
			z-index:10;
			font-size:.5vw;
			color:rgba(100,100,145,.6);
			user-select:none;
			-webkit-user-select:none;
			-moz-user-select:none;
			-ms-user-select:none;
			overflow:hidden;
			white-space:nowrap;
			text-overflow:ellipsis;
		}
		div#login-content label#pwd{
			position:relative;
			top:14vh; left:10%;
		}
		input{
			width:60%;
			height:4vh;
			box-shadow:0 0 0 1px gray inset,1px 1px 1px 0 darkolivegreen;
			border:none;
			color:black;
			font-family:monospace;
			text-indent:1em;
			z-index:1000;
		}
		div#login-content button{
			display:block;
			position:relative;
			color:darkorchid;
			top:18vh;left:10%;
			text-align:center;
			font-size:120%;
			font-weight:bolder;
			border:none;
			background:white;
			box-shadow:0 0 0 1px whitesmoke inset,1px 1px 1px 0 darkolivegreen;
			user-select:none;
			-webkit-user-select:none;
			-moz-user-select:none;
			-ms-user-select:none;
		}

		/*保持登录*/
		div#login-content div#check{
			position:relative;
			top:21.5vh;
			padding-top:2%;
			width:101%;
			height:4.2vh;
			border-top:1px solid rgba(200,200,200,.8);
			box-shadow:0 1px 1px 1px whitesmoke;
		}
		div#check>span{
			margin-left:6%;
			vertical-align:top;
			letter-spacing:1%;
			color:silver;
			font-size:110%;
		}
		#remenber{
			display:none;
		}
		label[for="remenber"]{
			color:rgba(0,0,0,0);
			background-color:white;
			border-radius:10px;
			padding:0;
			font-size:120%;
			box-shadow:0 0 1px 1px rgb(240,240,240), 1px 1px 3px 1px rgb(230,230,230);
			user-select:none;
			-webkit-user-select:none;
			-moz-user-select:none;
			-ms-user-select:none;
			-o-user-select:none;
			position:relative;
			left:45%;
		}
		label.not-keep{
			background-color:silver;
		}
		label.not-keep:before{
			position:absolute;
			top:1%;
			left:0;
			content:" ";
			background-color:white;
			box-shadow:0 0  4px 2px rga(245,245,245);
			border-radius:40%;
			width:50%;
			height:95%;
			margin:0;
			padding:0;
		}
		label.keep{
			background-color:rgb(100,200,100);
		}
		label.keep:after{
			position:absolute;
			top:1%;
			right:0;
			content:"\0x3";
			background-color:white;
			border-radius:40%;
			width:50%;
			height:95%;
			margin:0;
			padding:0;
		}

		/*注册界面*/
		div#register-content{visibility: hidden;}
		div#register-content>div{
			width:100%%;
			height:100%%;
			margin:0;
			padding:0;
		}
		div#register-content label#nick{
			position:relative;
			top:5vh;left:8%;
		}
		div#register-content label#mailbox{
			position:relative;
			top:7vh;left:12%;
		}
		div#register-content label#rpwd{
			position:relative;
			top:9vh;left:16%;
		}
		div#register-content label#confirm-pwd{
			position:relative;
			top:11vh;left:20%;
		}
		div#register-content button{
			display:block;
			position:relative;
			color:darkorchid;
			top:14vh;left:65%;
			text-align:center;
			font-size:120%;
			font-weight:bolder;
			border:none;
			background:white;
			box-shadow:0 0 0 1px whitesmoke inset,1px 1px 1px 0 darkolivegreen;
			user-select:none;
			-webkit-user-select:none;
			-moz-user-select:none;
			-ms-user-select:none;
		}


		div#reset-content{visibility:hidden;}
		div#reset-content>div{
			width:100%;
			height:100%;
			margin:0;padding:0;
		}
		div#reset-content label#old-pwd{
			position:relative;
			top:8vh;left:10%;
		}
		div#reset-content label#new-pwd{
			position:relative;
			top:10vh;left:25%;
		}
		div#reset-content label#confirm-new-pwd{
			position:relative;
			top:12vh;left:15%;
		}
		div#reset-content button{
			display:block;
			position:relative;
			color:darkorchid;
			top:16vh;left:30%;
			width:30%;height:5vh;
			text-align:center;
			font-size:120%;
			font-weight:bolder;
			border:none;
			background:white;
			box-shadow:0 0 0 1px whitesmoke inset,1px 1px 1px 0 darkolivegreen;
			user-select:none;
			-webkit-user-select:none;
			-moz-user-select:none;
			-ms-user-select:none;
		}
	</style>
</head>
<body>
<div id="login-component">
	<div class="aero-glass"></div>
	<div class="login-page">
		<ul class="login-nav" id="login-nav">
			<li><a id="login-content-li" onclick="underline(this)">登录</a></li>
			<li><a id="register-content-li" onclick="underline(this)">注册</a></li>
			<li><a id="reset-content-li" onclick="underline(this)">重置密码</a></li>
		</ul>

		<div class="login-page-content">
			<div id="login-content">
				<form action="D:/" method="post" accept-charset="utf-8">
					<label id="name">
						<input type="text" name="name_or_mail" value="" onkeyup="hidden_input_tips(this)" style="box-shadow: 1px 1px 1px 1px rgb(188,188,185)">
						<span id="input-slogan">输入邮箱或用户名</span>
					</label>
					<label id="pwd">
						<input type="password" name="password" value="" onkeyup="hidden_input_tips(this)" style="box-shadow: 1px 1px 1px 1px rgb(188,188,185)">
						<span id="input-slogan">输入密码</span>
					</label>
					<button type="submit">登 录</button>
					<div id="check">
						<span>保持登录</span>
						<input id="remenber" type="checkbox" name="remenber" value="">
						<label id="remenber-check" for="remenber" class="not-keep" onclick="Remenber()">Keep</label>
					</div>
				</form>
			</div>

			<div id="register-content">
				<div>
					<form action="/resgister" method="post" accept-charset="utf-8">
						<label id="nick">
							<input type="text" name="nick_name" value="" onkeyup="hidden_input_tips(this)" style="box-shadow: -5px 4px 1px 2px rgb(228,228,225);border:1px solid rgba(188,188,185,.5)">
							<span id="input-slogan">输入昵称，6~10个字符</span>
						</label>
						<label id="mailbox">
							<input type="email" name="email" value="" onkeyup="hidden_input_tips(this)" style="box-shadow: -5px 4px 1px 2px rgb(228,228,225);border:1px solid rgba(188,188,185,.5)">
							<span id="input-slogan">输入你常用的邮箱</span>
						</label>
						<label id="rpwd">
							<input type="password" name="password" value="" onkeyup="hidden_input_tips(this)" style="box-shadow: -5px 4px 1px 2px rgb(228,228,225);border:1px solid rgba(188,188,185,.5)">
							<span id="input-slogan">输入密码</span>
						</label>
						<label id="confirm-pwd">
							<input type="password" name="confirm-password" value="" onkeyup="hidden_input_tips(this)" style="box-shadow: -5px 4px 1px 2px rgb(228,228,225);border:1px solid rgba(188,188,185,.5)">
							<span id="input-slogan">确认密码</span>
						</label>
						<button type="submit">注 册</button>
					</form>
				</div>
			</div>

			<div id="reset-content">
				<div>
					<form action="/reset-pwd" method="post" accept-charset="utf-8">
						<label id="old-pwd">
							<input type="password" name="old_password" value="" onkeyup="hidden_input_tips(this)" style="box-shadow: -5px 4px 1px 2px rgb(228,228,225);border:1px solid rgba(188,188,185,.5)">
							<span id="input-slogan">请输入旧密码</span>
						</label>
						<label id="new-pwd">
							<input type="password" name="new_password" value="" onkeyup="hidden_input_tips(this)" style="box-shadow: 5px 4px 1px 2px rgb(228,228,225);border:1px solid rgba(188,188,185,.5)">
							<span id="input-slogan">输入新密码</span>
						</label>
						<label id="confirm-new-pwd">
							<input type="password" name="confirm_new_password" value="" onkeyup="hidden_input_tips(this)" style="box-shadow: -5px 4px 1px 2px rgb(228,228,225);border:1px solid rgba(188,188,185,.5)">
							<span id="input-slogan">确认新密码</span>
						</label>
						<button type="submit">确 认</button>
					</form>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	var map2lrr = {
		'login-content-li':document.getElementById('login-content'),
		'register-content-li':document.getElementById('register-content'),
		'reset-content-li':document.getElementById('reset-content'),
	};

	window.$a_li_tmp = document.getElementById("login-nav").childNodes.item(1);
	$a_li_tmp.style.cssText = 'border-bottom:none;background:rgb(255,255,255);'

	function underline(obj){
		if($a_li_tmp)
		{
			$a_li_tmp.style.cssText = 'border-bottom:1px solid ;background:rgb(230,230,230);';
			map2lrr[$a_li_tmp.childNodes[0].id].style.visibility = 'hidden';		
		}
		obj.parentNode.style.cssText = 'border-bottom:none;background:rgb(255,255,255);';
		map2lrr[obj.id].style.visibility = 'visible';		
		$a_li_tmp = obj.parentNode;
	}

	function Remenber(){
		var remenber = document.getElementById("remenber");
		var btn = document.getElementById("remenber-check");
		btn.className = remenber.checked?"not-keep":"keep";
	}

	function hidden_input_tips(obj){
		console.log('test');
		var inputips = obj.parentNode.querySelector("span");
		if(obj.value)
			inputips.style.visibility = "hidden";
		else
			inputips.style.visibility = "visible";
		
	}


</script>
</body>
</html>